<template>
	<view class="list">
		<view class="top">
			仿京东秒杀
			<text style="margin-left: 10rpx;font-size: 35rpx;">
				{{ remainingTime.hours }} :{{ remainingTime.minutes }} :{{ remainingTime.seconds }}
			</text>
		</view>
		<view class="desk">
			<view v-for="(item,index) in listpro" :key="index" class="item">
				<image :src="item.img1"></image>
				<text class="txt" style="font-weight: bold;">￥{{item.originprice}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				endTime: new Date().getTime() + 24 * 60 * 60 * 1000, // 当前时间 + 24小时
				remainingTime: {},
			};
		},
		created() {
			this.updateRemainingTime(); // 初始化剩余时间
			setInterval(() => {
				this.updateRemainingTime(); // 每秒钟更新剩余时间
			}, 1000);
		},
		methods: {
			updateRemainingTime() {
				const now = new Date().getTime();
				const totalSeconds = Math.floor((this.endTime - now) / 1000);
				const hours = Math.floor(totalSeconds / 3600);
				const minutes = Math.floor((totalSeconds % 3600) / 60);
				const seconds = totalSeconds % 60;
				this.remainingTime = {
					hours,
					minutes,
					seconds
				};
			},
		},
		props: ['listpro']
	}
</script>

<style lang="scss">
	.list {
		margin-top: 5rpx;
		width: 100vw;
		height: 15vh;
		background-color: #fff;
		margin: 5rpx;

		.top {
			margin-bottom: 5rpx;
			color: orangered;
			font-size: 30rpx;
			font-weight: bold;
		}

		.desk {
			width: 100vw;
			height: 100%;
			display: flex;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}
	}
</style>